<template>
        <div class="gedan_2">
            <ul v-if="gedan_7">
                <li @mouseover='fnshow(index)' v-for="(item,index) in gedan_7" :key="item.picUrl" @click="skip(item)">
                    <router-link :to="{path:'/xiangqing', query:{id:item.id}}">
                    <img   @mouseout='hide' :src="item.picUrl">
                    <div class="bfl">
                        <i class="el-icon-caret-right"></i>
                        {{changeCount(item.playCount)}}
                    </div>
                    <div @mouseover='fnshow(index)' class="imgiii" :class="{active: index === show}">
                            <i class="el-icon-video-play"></i>
                    </div>
                    <span class="gedan_7_name">{{item.name}}</span>
                    </router-link>
                </li>
            </ul>
        </div>    
</template>
<script>
export default {
    name:'gedan',
    props:['gedan_7'],
    data() {
        return {
            show:100
        }
    },
    methods: {
        changeCount:function(num){
            if(num>10000){
                return (num/10000).toFixed(1)+"万"
            }
            return num;
        },
        skip(item){
            
        },
        fnshow(index){
            console.log(index)
            this.show = index
        },
        hide(){
            this.show = 100
        }
    },
}
</script>
<style lang="less" scoped>
.gedan_7_name{
    font-size: 15px;
    margin: 3px 0;
}
.imgiii{
    display: none;
    position: absolute;
    font-size: 40px;
    color: pink;
    right: 20px;
    bottom: 60px;
    opacity: 0.8;
    }
    .active{
        display: block;
    }
    .gedan_2{
    width: 100%;
    ul{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        li{
            position: relative;
            width: 18%;
            border-radius: 5px;
            overflow: hidden;
            margin-bottom: 10px;
        }
        img{
            width: 100%;
            height: 80%;
        }
    }
}
.bfl{
    display: flex;
    
    align-items: center;
    position: absolute;
    top: 10px;
    right: 10px;
    color: white;
    font-size: 10px;
    i{
        font-size: 18px;
    }
}
</style>